﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<script src="~/scripts/jquery-3.4.1.min.js"></script>
<script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>

<div class="layui-card">
   
    <div class="layui-card-body">
        <!-- 搜索条件 -->
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">编号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="code" placeholder="请输入编号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">学历</label>
                    <div class="layui-input-inline">
                        <select name="degree" lay-verify="">
                            <option value="">请选择学历</option>
                            <option value="高中">高中</option>
                            <option value="专科">专科</option>
                            <option value="本科">本科</option>
                            <option value="硕士">硕士</option>
                            <option value="博士">博士</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="status" lay-verify="">
                            <option value="">请选择状态</option>
                            <option value="备选">备选</option>
                            <option value="入职通过">入职通过</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="searchForm">查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

      

        <!-- 数据表格 -->
        <table id="talentTable" lay-filter="talentTable"></table>
    </div>
</div>

<script>
layui.use(['table', 'form', 'layer', 'util'], function(){
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    var util = layui.util;
    
    // 初始化表格
    table.render({
        elem: '#talentTable'
        ,toolbar: '#toolbarDemo'
        ,defaultToolbar: ['filter', 'exports', 'print']
        ,url: '/Talentregistration/GetTalentregistrationModel'
        ,method: 'get'
        ,page: {
            layout: ['count', 'prev', 'page', 'next', 'limit', 'skip', 'refresh']
            ,limits: [3, 10, 20, 50, 100]
            ,limit: 3
            ,curr: 1
            ,groups: 5
            ,first: '首页'
            ,last: '尾页'
            ,theme: '#009688'
        }
        ,cols: [[
            {type: 'checkbox', fixed: 'left'}
            ,{field:'employeeCode', title:'编号', width:100}
            ,{field:'employeeName', title:'姓名', width:100}
            ,{field:'employeePhone', title:'联系电话', width:120}
            ,{field:'employeeEmail', title:'电子邮箱', width:150}
            ,{field:'employeeSex', title:'性别', width:80}
            ,{field:'degree', title:'学历', width:100}
            ,{field:'maritalStatus', title:'婚姻状况', width:100}
            ,{field:'ethnicgroup', title:'民族', width:100}
            ,{field:'status', title:'状态', width:100}
            ,{field:'biryhdayTime', title:'出生日期', width:160, templet: function(d){
                if (!d.biryhdayTime) return '';
                // 处理日期格式 "2002-05-01T00:00:00+08:00" -> "2002-05-01"
                return d.biryhdayTime.split('T')[0];
            }}
            ,{field:'politicalOutlook', title:'政治面貌', width:100}
            // ,{fixed: 'right', title:'操作', toolbar: '#tableBar', width:120}
        ]]
        ,parseData: function(res){ 
            console.log('完整的返回数据:', res);
            if (res.listDate && res.listDate.length > 0) {
                console.log('第一条数据:', res.listDate[0]);
                console.log('出生日期字段:', res.listDate[0].BiryhdayTime);
            }
            return {
                "code": 0,
                "msg": "",
                "count": res.pageCount,    
                "totalPages": Math.ceil(res.pageCount / (res.limit || 3)),  
                "limit": res.limit || 3,   
                "curr": res.pageIndex || 1,  
                "data": res.listDate
            };
        }
        ,request: {
            pageName: 'page'
            ,limitName: 'limit'
        }
    });

    // 监听分页事件
    table.on('page(talentTable)', function(obj){
        console.log(obj);
        table.reload('talentTable', {
            page: {
                curr: obj.curr
            }
        });
    });

    // 监听搜索表单提交
    form.on('submit(searchForm)', function(data){
        table.reload('talentTable', {
            where: data.field
        });
        return false;
    });

    // 监听重置按钮点击事件
    $('button[type="reset"]').click(function(){
        // 重置表单
        $('form')[0].reset();
        form.render(); // 重新渲染表单，特别是下拉框
        
        // 重新加载表格，不带任何查询条件
        table.reload('talentTable', {
            where: {}
        });
        return false;
    });

    // 监听工具条
    table.on('toolbar(talentTable)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
        switch(obj.event){
            case 'add':
                layer.open({
                    type: 2,
                    title: '添加人才信息',
                    area: ['800px', '600px'],
                    content: '/Talentregistration/Add'
                });
                break;
            case 'batchDel':
                var data = checkStatus.data;
                if(data.length === 0){
                    layer.msg('请选择要删除的记录');
                    return;
                }
                layer.confirm('确认要删除这些记录吗？', function(index){
                    var ids = data.map(item => item.id);
                    // TODO: 添加批量删除的ajax请求
                    layer.close(index);
                });
                break;
        };
    });
    
    // 监听行工具事件
    table.on('tool(talentTable)', function(obj){
        var data = obj.data;
        if(obj.event === 'del'){
            layer.confirm('确认删除这条记录？', function(index){
                $.ajax({
                    url: '/Talentregistration/Delete',
                    type: 'POST',
                    data: { id: data.id },
                    success: function(res){
                        if(res.success){
                            obj.del();
                            layer.msg('删除成功');
                        }else{
                            layer.msg('删除失败: ' + res.message);
                        }
                    }
                });
                layer.close(index);
            });
        } else if(obj.event === 'edit'){
            layer.open({
                type: 2,
                title: '编辑人才信息',
                area: ['800px', '600px'],
                content: '/Talentregistration/Edit?id=' + data.id
            });
        }
    });
});
</script>

